<template>
  <div class="main relative">
    <div class="logo">
      <img src="../../assets/images/logoNew.png" alt="" width="100px" />
      <div class="name">
        <div class="title">广东能源集团台山合和燃气有限公司</div>
        <div class="subtitle">
          GUANGDONG ENERGY GROUP TAISHAN HARMONY GAS CO.,LTD.
        </div>
      </div>
    </div>
    <div class="container">
      <div class="bg-blue relative">
        <img src="../../assets/images/bg-img.png" alt="" class="bg-image" />
        <div class="cir"></div>
        <span
          class="item item1"
          :class="current === 1 ? 'current' : ''"
          @click="selectPro(1, systemName1)"
        >
          <div class="img-border item-bg1">
            <img class="item-img" src="../../assets/images/share.png" alt="" />
          </div>
          <span class="item-text">{{ systemName1 }}</span>
        </span>
        <span
          class="item item2"
          :class="current === 2 ? 'current' : ''"
          @click="selectPro(2, systemName2)"
        >
          <!-- href="http://119.23.245.231:8085/" -->
          <div class="img-border item-bg2">
            <img class="item-img" src="../../assets/images/edit.png" alt="" />
          </div>
          <span class="item-text">{{ systemName2 }}</span>
        </span>
        <span
          class="item item3"
          :class="current === 3 ? 'current' : ''"
          @click="selectPro(3, systemName3)"
        >
          <!-- href="http://101.132.105.177/cbim/tshh" -->
          <div class="img-border item-bg3">
            <img class="item-img" src="../../assets/images/worker.png" alt="" />
          </div>
          <span class="item-text">{{ systemName3 }}</span>
        </span>
        <span
          class="item item4"
          :class="current === 4 ? 'current' : ''"
          @click="selectPro(4, systemName4)"
        >
          <div class="img-border item-bg4">
            <img
              class="item-img"
              src="../../assets/images/safeity.png"
              alt=""
            />
          </div>
          <span class="item-text">{{ systemName4 }}</span>
        </span>
      </div>
      <div class="login-box">
        <div class="login-title">{{ title }}</div>
        <el-form
          ref="ruleForm"
          label-position="right"
          label-width="75px"
          :model="loginForm"
          :rules="rules"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              :key="passwordType"
              ref="password"
              v-model="loginForm.password"
              :type="passwordType"
              placeholder="请输入密码"
              name="password"
            />
            <span class="show-pwd" @click="showPwd">
              <img
                v-show="passwordType === 'password'"
                src="../../assets/images/eye-close.png"
                alt=""
                width="20px"
              />
              <img
                v-show="passwordType !== 'password'"
                src="../../assets/images/eye.png"
                alt=""
                width="20px"
              />
            </span>
          </el-form-item>
          <div class="login-item">
            <el-button type="primary" @click="login()">登录</el-button>
          </div>
        </el-form>
        <div class="skip">
          <a
            v-if="current == 1"
            class="skip-btn"
            target="_blank"
            href="http://39.108.53.73:8010/tshhdtp/#/"
          >
            <!-- href="http://101.132.105.177/tshhdtp" -->
            跳过登录，免登进入
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { preLogin, gcxmLogin } from "@/api/gcxm"; //api接口
import { login, getMenu } from "@/api/user"; //api接口
import { JSEncrypt } from "jsencrypt";
import { encryptAES, decryptAES } from "@/utils/cipher";
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      passwordType: "password",
      current: 1,
      systemName1: "数据共享门户",
      systemName2: "工程项目管理平台",
      systemName3: "线路智能工地",
      systemName4: "巡检",
      title: "登录数据共享门户",
      publicKey: "",
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },

  // mounted() {
  //   document.title("广东能源集团台山合和燃气有限公司");
  // },

  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    selectPro(curr, sysName) {
      this.current = curr;
      this.title = "登录" + sysName;
    },
    login() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.current === 1) {
            this.sysLoginValidate();
          } else if (this.current === 2) {
            this.gcxmPreLogin();
          } else if (this.current === 3) {
            this.sysLoginValidate();
          } else if (this.current === 4) {
            this.$message.warning("该系统暂未上线");
          }
        }
      });
    },
    sysLoginValidate() {
      const params = {
        username: this.loginForm.username,
        password: encryptAES(
          JSON.parse(JSON.stringify(this.loginForm.password))
        ),
      };
      login(params).then((res) => {
        if (res.code == 0) {
          const query = encryptAES(
            "username=" +
              this.loginForm.username +
              "&password=" +
              this.loginForm.password
          );
          if (this.current == 3) {
            window.open(
              // "http://101.132.105.177/cbim/tshh/#/tokenAccess?params=" + encodeURIComponent(query)
              "http://39.108.53.73:8010/cbim/tshh/#/tokenAccess?params=" +
                encodeURIComponent(query)
            );
          } else if (this.current == 1) {
            // window.open("http://101.132.105.177/tshhdtp/#/?params=" + encodeURIComponent(query));
            window.open(
              "http://39.108.53.73:8010/tshhdtp/#/?params=" +
                encodeURIComponent(query)
            );
          }
        }
      });
    },
    gcxmPreLogin() {
      const params = {
        client_id: "jscUser",
        client_secret:
          "3R1UstAtgIji9+T9oft6iR2wiH4eUuSBJOdE1GpiWixGo1U4BH++41OgUFvOAMoi",
        key: "1222222222",
      };
      preLogin(params).then((res) => {
        if (res.code !== 0) {
          this.$message.error("res.message");
        } else {
          this.publicKey = res.result.publicKey;
          this.gcxmLogin();
        }
      });
    },
    gcxmLogin() {
      const params = {
        client_id: "jscUser",
        client_secret:
          "3R1UstAtgIji9+T9oft6iR2wiH4eUuSBJOdE1GpiWixGo1U4BH++41OgUFvOAMoi",
        username: this.RSAencrypt(this.loginForm.username),
        password: this.RSAencrypt(
          this.loginForm.username + this.loginForm.password
        ),
        codeCacheKey: "1222222222",
        language: "zh-CN",
      };
      gcxmLogin(params).then((res) => {
        if (res.code === 200) {
          window.open(
            "http://119.23.245.231:8085/#/user/tokenAccess?Authorization=" +
              res.result.token
          );
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 加密方法
    RSAencrypt(str) {
      let publicKey = this.publicKey;
      let encryptor = new JSEncrypt();
      encryptor.setPublicKey(publicKey);
      let encryptStr = encryptor.encrypt(str);
      return encryptStr;
    },
  },
};
</script>
<style lang="scss" scoped>
.relative {
  position: relative;
}
.main {
  width: 100%;
  min-width: 1200px;
  height: 100vh;
  min-height: 680px;
  background: url(../../assets/images/bg.jpg) no-repeat;
  background-size: 100% 100%;
}
.logo {
  position: absolute;
  top: 40px;
  left: 60px;
  display: flex;
  align-items: center;
}
.name {
  color: #fff;
  margin-left: 10px;
}
.title {
  font-size: 28px;
  font-weight: 600;
  height: 30px;
  line-height: 30px;
  margin-bottom: 8px;
  /* letter-spacing: 6px; */
}
.subtitle {
  font-size: 14px;
}
.container {
  position: absolute;
  top: 52%;
  left: 48%;
  transform: translate(-50%, -50%);
  width: 55%;
  min-width: 1100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bg-blue {
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background-color: #2e92f2;
}
.bg-image {
  position: absolute;
  left: -59px;
  top: -26px;
  width: 435px;
}
.cir {
  width: 385px;
  height: 385px;
  border: 3px dashed #fff;
  border-radius: 50%;
}
.item {
  cursor: pointer;
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
}
.img-border {
  width: 62px;
  height: 62px;
  border: 4px solid #fff;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
}
.item:hover .img-border {
  box-shadow: 0 0 9px 2px #403030;
}
.item:hover .item-text {
  color: #c5c5c5;
}
.current .img-border {
  box-shadow: 0 0 9px 5px #403030;
}
.current .item-text {
  color: #d3d3d3;
}
.item1 {
  left: 309px;
  top: 20px;
}
.item2 {
  left: 367px;
  top: 144px;
}
.item3 {
  left: 333px;
  top: 274px;
}
.item4 {
  left: 212px;
  top: 357px;
}
.item-bg1 {
  background-image: linear-gradient(-45deg, #f1a31e, #ffd167);
}
.item-bg2 {
  background-image: linear-gradient(-45deg, #fd5b55, #ff8b85);
}
.item-bg3 {
  background-image: linear-gradient(-45deg, #0f73cc, #65cbf5);
}
.item-bg4 {
  background-image: linear-gradient(-45deg, #a782f1, #8b63ff);
}
.item-img {
  width: 40px;
  height: 40px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.item-text {
  width: 180px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 2px;
  color: #fff;
  margin-left: 20px;
  text-align: left;
}

.login-box {
  width: 330px;
  height: 320px;
  background: #fff;
  padding: 30px 20px;
  border-radius: 8px;
  border: 5px solid rgba(0, 0, 0, 0.3);
}
.login-title {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 50px;
}
.login-item {
  width: 100%;
  height: 35px;
  margin-top: 40px;
  box-sizing: border-box;
  position: relative;
}
.el-button {
  width: 100%;
}
.show-pwd {
  position: absolute;
  right: 10px;
  top: 0px;
  font-size: 16px;
  color: #889aa4;
  cursor: pointer;
  user-select: none;
}
.skip {
  height: 20px;
  line-height: 20px;
  margin-top: 20px;
  text-align: right;
  .skip-btn {
    color: #0f73cc;
    font-size: 14px;
  }
}
</style>
